<template>
    <div class="recycle-layout">
        <header-view>
            <img src="../../../assets/image/back.png" alt="" class="icon" @click="goBack">
            <div class="title">回收站</div>
            <div class="font-large26 clear" @click="clearRecycle">清空</div>
        </header-view>
        <div class="content">
            <ul class="folder-list">
                <li class="item" v-for="(item,index) in recycleList.folders" :key="index">
                    <img src="../../../assets/image/folder.png" alt="">
                    <span class="font-large26">{{item.name}}</span>
                </li>
            </ul>
            <ul class="file-list">
                <li class="item" v-for="(item,index) in recycleList.fileInfos" :key="index">
                    <img src="../../../assets/image/file.png" alt="" class=""><span class="font-large26">{{item.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import HeaderView from '../../common/HeaderView';

    import {recycleGetMyAll,recycleCleanMy} from '../../../api/recycleBin'

    export default {
        name: 'MyRecycleView',
        components: {HeaderView},
        data() {
            return {
                recycleList:{
                    folders: [],
                    fileInfos: []
                }
            }
        },
        mounted() {
            this.getMyRecycle()
        },
        methods:{
            goBack() {
                this.$router.push({name: 'index',params: {index: 4}})
            },
            getMyRecycle() {
                recycleGetMyAll()
                    .then(res => {
                        // console.log(res)
                        const { data } = res;
                        this.recycleList = data
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            clearRecycle() {
                recycleCleanMy()
                    .then(() => {
                        this.recycleList = {
                            folders: [],
                            fileInfos: []
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
        }
    }
</script>

<style scoped>
    .recycle-layout {
        background: #F5F8FB;
        min-height: 86.8vh;
        padding: 20px;
        margin-top: 135px;
    }

    .clear {
        color: #fff;
        margin-right: 30px;
    }
    .item {
        display: flex;
        align-items: center;
        height: 100px;
        box-sizing: border-box;
        padding: 0 20px;
        background: #fff;
        border-radius: 30px;
        margin-top: 10px;
    }
    .item img {
        width: 50px;
        margin-right: 30px;
    }
    .item span {
        flex: 1;
        /*border-bottom: 1px solid rgba(51, 51, 51, 0.15);*/
        line-height: 100px;
    }

</style>